<template>
  <el-dialog
    :title="type ? '查看投放区域' : '选择配送区域'"
    width="40%"
    top="5%"
    :visible="visible"
    @close="visible = !visible"
  >
    <el-tree
      :data="data"
      ref="tree"
      show-checkbox
      node-key="id"
      :default-checked-keys="checkedKeys"
      :props="defaultProps"
      @check-change="checkChange"
      @check="currentChange"
      v-loading="loading"
    />
    <div slot="footer" class="footer-operate" v-if="!type">
      <el-checkbox
        v-model="checked"
        :indeterminate="isIndeterminate"
        @change="handleCheckAllChange"
      >
        全选
      </el-checkbox>
      <div class="footer-operate-submit">
        <p class="mr-10">已选择{{ number }}个区域</p>
        <el-button type="primary" size="small" @click="onSubmit"> 提交 </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { deepClone, treeToList, listToTree } from '@/utils'
export default {
  name: 'RegionTree',
  props: {
    value: Boolean,
    type: {
      type: String,
      default: ''
    },
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      checkedKeys: [],
      showdialog: false,
      number: 0,
      checked: false,
      isIndeterminate: false,
      data: [],
      defaultProps: {
        children: 'lowerList',
        label: 'areaName',
        disabled: () => {
          return this.type ? true : false
        }
      },
      areaIdArr: [],
      areaArr: [],
      Arrdatas: [],
      Val: ''
    }
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible
      },
      set(val) {
        this.$emit('update:dialogVisible', val)
      }
    }
  },
  methods: {
    //初始化数据
    async initData(data) {
      this.loading = true
      const res = await this.$http.commons.getRegion()
      this.data = res.data
      const cloneData = deepClone(data)
      const arr = treeToList(cloneData, 'lowerList')
      const checkedKeys = arr.filter(item => !item.lowerList).map(v => v.id)
      await this.$refs.tree.setCheckedKeys(checkedKeys)
      this.number = this.$refs.tree.getCheckedNodes().length
      this.checked = this.number === 439
      this.isIndeterminate = this.number > 0 && this.number < 439

      this.loading = false
    },
    /**
     * @description: 全选
     * @param {*}
     * @return {*}
     */
    handleCheckAllChange(val) {
      this.$emit('input', val) // 全选
      if (this.checked) {
        //全选
        this.$refs.tree.setCheckedNodes(this.data)
        this.number = this.$refs.tree.getCheckedNodes().length
        this.isIndeterminate = this.number > 0 && this.number < 439
      } else {
        //取消选中
        this.number = 0
        this.$refs.tree.setCheckedKeys([])
      }
    },
    /**
     * @description: 提交
     * @param {*}
     * @return {*}
     */
    onSubmit() {
      if (this.$refs.tree.getCheckedKeys().length === 0) return this.$message.error('请选择区域')
      // 拿到所有选中的文字
      const checkedNodes = this.$refs.tree.getCheckedNodes()
      //所有半选的节点
      const halfCheckedNodes = this.$refs.tree.getHalfCheckedNodes()
      this.areaArr = [...checkedNodes, ...halfCheckedNodes]
      this.areaArr.forEach(item => {
        if (item.lowerList || item.lowerList === null) {
          delete item.lowerList
        }
      })
      const arr = listToTree(this.areaArr, 'id', 'parentId', 'lowerList')
      this.$emit('getAreaSelect', { selctArea: arr, selctIdArea: this.areaArr })
      this.$emit('getAreaIdSelect', this.areaArr)
      this.visible = false
    },
    /**
     * @description: 取消全选
     * @param {*} val
     * @param {*} Bol
     * @return {*}
     */
    checkChange(val, Bol, data) {
      if (!Bol) {
        this.checked = false
      }
    },
    /**
     * @description: 单独选中的时候
     * @param {*} val
     * @param {*} data
     * @return {*}
     */
    currentChange(val, data) {
      this.number = data.checkedNodes.length
      this.checked = this.number === 447
      this.isIndeterminate = this.number > 0 && this.number < 447
    }
  }
}
</script>

<style lang="scss" scoped>
.footer-operate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  &-submit {
    display: flex;
    align-items: center;
    font-size: 14px;
  }
}
</style>
